<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0px;
    }
    /* 顶部部分 */
    .topnav{
        display: flex;
        flex-direction: row; 
        align-items: center;
        justify-content: space-between;
        background-color: white;
        height: 80px;
    }
    .topnav img:nth-child(1){
        width: 20px;
        height: 20px;
        margin-left: 20px;
    }
    .topnav span:nth-child(2){
        font-size: 20px;
        color: #505050;
        position: relative;
        left: -150px;
    }
    /* 分割线 */
    .line{
        height: 2px;
        background-color: #f2f4f8;
        margin-top: 0px;
    }
    /* 栏目1：视频下载在清晰度 */
    .column1{
        height: 50px;
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 20px;
    }
    .column1 span:nth-child(1){
        color: #505050;
    }
    .column1 span:nth-child(2){
        color: #9ca1aa;
        position: relative;
        left: 50px;
    }
    .column1 span:nth-child(3){
        color: #6cc7a0;
        position: relative;
        left: 10px;
    }
    /* 栏目2：视频自动连续播放 */
    .column2{
        height: 50px;
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 20px;
        color: #505050;
    }
    .column2 span:nth-child(1){
        position: relative;
        left: -20px;
    }
    .column2 img:nth-child(2){
        position: relative;
        left: 30px;
    }
    /* 栏目3.4 */
    .column3{
        height: 50px;
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 20px;
        color: #505050;
    }
    .column3 span:nth-child(1){
        position: relative;
        left: 10px;
    }
    /* 栏目5：清除缓存 */
    .column5{
        height: 50px;
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 20px;
        color: #505050;
    }
    .column5 span:nth-child(1){
        margin-left: -60px;
    }
    .column5 span:nth-child(2){
        position: relative;
        left: 60px;
    }
    /* 栏目6:关于 */
    .column6{
        height: 50px;
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 20px;
        color: #505050;
    }
    .column6>span{
        position: relative;
        left: -50px;
    }
    .column6>img{
        height: 25px;
        width: 25px;
        position: relative;
        left: 60px;
    }
    /* 退出账号 */
    .icon{
        height: 50px;
        width: 350px;
        border: 2px solid #ced4e0;
        border-radius: 5px;
        text-align: center;
        font-size: 20px;
        margin-top: 50px;
        margin-left: 10px;
        color: #ea5235;
    }
    .icon>span{
        position: relative;
        top: 10px;
    }
</style>
<body>
    <!-- 顶部部分 -->
    <div class="topnav">
        <img src="../jpg/返回黑.png" >
        <span>设置</span>
    </div>
    <!-- 分割线 -->
    <div class="line"></div>
    <!-- 栏目1 -->
    <div class="column1">
        <span>视频下载清晰度</span>
        <span>流畅  |</span>
        <span>高清</span>
    </div>
    <div class="line"></div>
    <!-- 栏目2 -->
    <div class="column2">
        <span>视频自动连续播放</span>
        <img src="../jpg/开.png">
    </div>
    <div class="line"></div>
    <!-- 栏目3 -->
    <div class="column3">
        <span>允许使用2G/3G/4G网络观看视频</span>
        <img src="../jpg/关.png">
    </div>
    <div class="line"></div>
    <!-- 栏目4 -->
    <div class="column3">
        <span>允许使用2G/3G/4G网络下载视频</span>
        <img src="../jpg/关.png">
    </div>
    <div class="line"></div>
    <!-- 栏目5 -->
    <div class="column5">
        <span>清除缓存</span>
        <span>65M</span>
    </div>
    <div class="line"></div>
    <!-- 栏目6 -->
    <div class="column6">
        <span>关于</span>
        <img src="../jpg/前进.png" alt="">
    </div>
    <div class="line"></div>
    <!-- 退出账号 -->
    <div class="icon">
        <span>退出账号</span>
    </div>
</body>
</html>